<template>
    <view class="container">
        <image class="avater section" :src="unit.avatar" mode="aspectFill"></image>
        <view class="content section">
            <article-content ref='articleContent' :article='handledOriginContent'></article-content>
        </view>
    </view>
</template>

<script>
    import {
        isEmpty
    } from '../../../../common/utils/util';
    import ArticleContent from "../../components/article-content.vue"
    export default {
        components: {
            ArticleContent
        },
        data() {
            return {
                unit: null,
                extraInfo: null
            };
        },
        onReady() {
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.on("openOriginPage", (info) => {
                this.unit = info.unit;
                this.extraInfo = info.extraInfo;
            })
        },
        computed: {
            handledOriginContent: function() {
                const {
                    unit,
                    extraInfo
                } = this;
                let result = this.initOriginContent(unit, extraInfo);

                return result;
            }
        },
        methods: {
            scrollToKeyParagraphTop() {
                this.$refs.articleContent.selectedKeyParagraphNode(res => {
                    console.log('test', res);
                    uni.pageScrollTo({
                        scrollTop: res.top
                    })
                });
            },
            initOriginContent(unit, extraInfo) {
                if (unit && extraInfo) {
                    const {
                        englishTitle,
                        englishContent
                    } = unit;
                    const {
                        keyParagraph
                    } = extraInfo
                    // TODO 还是需要使用 keyParagraph 需要去掉模拟数据 临时错误数据的测试方案
                    let tempValue =
                        "<p>Overall, both cats and dogs are great companions for humans. They not only provide companionship and comfort, but also help us relieve <mark>stress</mark> and anxiety. Whether you choose to have a cat or a dog, it is important to take good care of them and build a strong bond with them.</p>"
                    this.$nextTick(() => {
                        this.scrollToKeyParagraphTop();
                    })
                    return this.processkeyParagraphFn(englishTitle, englishContent, tempValue)
                }
                return []
            },
            // 处理关键段落
            processkeyParagraphFn(title, content, keyParagraph) {
                let result = [];
                // 插入标题
                result.push({
                    tag: "h1",
                    content: title,
                })
                // 替换掉所有换行符
                content = content.replace(/\n/g, "");
                content = content.replace(/\s+/g, " ");
                // 读取所有p标签内容
                let tempList = content.match(/[^><]+(?=<\/p>)/img);

                keyParagraph = keyParagraph.replace(/\n/g, "");
                keyParagraph = keyParagraph.replace(/\s+/g, " ");
                keyParagraph = keyParagraph.replace(/(<mark>)/img, "");
                keyParagraph = keyParagraph.replace(/(<\/mark>)/img, "");
                let tempKeyParagraph = keyParagraph.match(/[^><]+(?=<\/p>)/img);
                if (isEmpty(tempKeyParagraph)) {
                    tempKeyParagraph = ""
                } else {
                    tempKeyParagraph = tempKeyParagraph[0];
                }
                // 遍历段落内容
                tempList.forEach((item, index) => {
                    // 判断是否是关键段落
                    if (tempKeyParagraph && item == tempKeyParagraph) {
                        result.push({
                            tag: "p key-paragraph",
                            content: item
                        })
                    } else {
                        // 如果不是关键段落，不需要处理直接插入段落内容，
                        result.push({
                            tag: "p",
                            content: item
                        })
                    }
                })
                return result;
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../styles/sub-page.scss";
</style>